<template>
	<common-card class="portal_teach_situation">
		<div class="total">
			<dl v-for="(item, index) in situationData" :key="index">
				<dt :style="{ color: item.color }">{{ item.value }}</dt>
				<dd>{{ item.name }}</dd>
			</dl>
		</div>
		<sw-chart :option="chartOption" auto-resize></sw-chart>
	</common-card>
</template>

<script lang="ts" setup>
import { useChart } from '@/hooks';
import commonCard from '../commonCard.vue';
defineOptions({ name: 'TeachSituation' });
const situationData = reactive([
	{ name: '教学班', value: 557, color: '#273445' },
	{ name: '课时', value: 1114, color: '#0f73fc' },
	{ name: '上课教员人数', value: 557, color: '#41ae84' },
	{ name: '上课学员人数', value: 1289, color: '#ffac03' }
]);
const courseTypeData = reactive([
	{ name: '理论授课', value: 10 },
	{ name: '实践讲授', value: 52 },
	{ name: '实验讲授', value: 200 },
	{ name: '综合演练', value: 334 },
	{ name: '实战训练', value: 390 },
	{ name: '部队实习', value: 330 },
	{ name: '教员督导', value: 220 },
	{ name: '其他', value: 557 }
]);
const { chartOption } = useChart((isDark: EChartsOption) => {
	return {
		title: { show: true, text: '今日各授课类型学时分布', top: 0, left: 12, textStyle: { fontSize: 14 } },
		tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
		grid: { top: 40, left: 16, right: 16, bottom: 16, containLabel: true },
		xAxis: { type: 'category', data: courseTypeData.map((n) => n.name) },
		yAxis: { type: 'value' },
		series: [
			{
				//42ecc7, 17c8d2
				type: 'bar',
				name: '类型分布',
				barWidth: '40%',
				itemStyle: {
					borderRadius: 6,
					color: {
						type: 'linear',
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						colorStops: [
							{ offset: 0, color: '#17c8d2' },
							{ offset: 1, color: '#42ecc7' }
						]
					}
				},
				data: courseTypeData.map((n) => n.value)
			}
		]
	};
});
</script>

<style lang="scss" scoped>
.portal_teach_situation {
	&:deep(.arco-card-body) {
		flex-direction: column;
	}
	.total {
		display: flex;
		height: 58px;
		gap: 16px;
		padding: 16px;
		dl {
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #f5f5f5;
			border-radius: 4px;
			flex: 1;
		}
		dt {
			font-size: 24px;
			font-weight: 700;
			line-height: 1.5;
			border-right: solid 1px #ddd;
			white-space: nowrap;
			padding: 0 16px;
			flex-shrink: 0;
			color: #333;
		}
		dd {
			flex: 1;
			color: #666;
			font-size: 14px;
			padding: 0 10px;
			text-align: center;
		}
	}
}
</style>
